<template>
  <div>
    <!-- 折线图 -->
    <div id="myChart" :style="{ width: '100%', height: '600px' }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getStudentNewData, getStudentRemoveData } from '../api/interface';
export default {
  data() {
      return {
          //日期
          // clickDate: [],
          //数量
          // count:[],
      }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    async drawLine() {
        
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"))

      const result = await getStudentNewData()
        console.log(result)
        for (var key in result.data) {
        console.log("key键:"+key+","+"值"+result.data[key])
        }
        var addData = [];
        for (let i = 0; i < result.data.length; i++) {
            var obj = new Object();
            obj.name = result.data[i].click_date;
            obj.value = result.data[i].count;
            // console.log("obj.name名字"+obj.name)
            // console.log("obj.value值"+obj.value)
            addData[i] = obj;
        }

        const result1 = await getStudentRemoveData()
        console.log(result)
        var removeData = [];
        for(let i = 0; i < result1.data.length; i++){
          var obj1 = new Object();
          obj1.name = result1.data[i].click_date;
          obj1.value = result1.data[i].count;
          console.log("obj.name名字"+obj.name)
          console.log("obj.value值"+obj.value)
          removeData[i] = obj1
        }

    // var addDatas = [];
    // addDatas[0] = 10;
    // addDatas[1] = 20;
    // addDatas[2] = 15;
    // addDatas[3] = 30;
    // addDatas[4] = 15;
    // addDatas[5] = 14;
    // addDatas[6] = 21;

    //删除人数统计这个没有思路
    //可以选择换一个数据统计 哈哈

    //有思路了，加了一个字段实现了
      // var removeData = [];
      // removeData[1] = 2;
      // removeData[2] = 3;
      // removeData[3] = 1;
      // removeData[4] = 5;
      // removeData[5] = 2;
      // removeData[6] = 3;
      // removeData[0] = 4;

      // 绘制图表
      //只用看 data 就行了，其他的都是一些效果，计算，标题什么的
      myChart.setOption({
        title: {
          text: "学生变更信息",
          subtext: "纯属虚构",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["新增", "删除"],
        },
        toolbox: {
          show: true,
          feature: {
            //右边的几个切换效果
            //只留了 切换为柱状图和数据视图
            // dataZoom: {
            //   yAxisIndex: "none",
            // },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            // restore: {},
            // saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
        //   data: [
        //     "星期一",
        //     "星期二",
        //     "星期三",
        //     "星期四",
        //     "星期五",
        //     "星期六",
        //     "星期日",
        //   ],
          data: [
            //笨方法渲染
            addData[6].name,
            addData[5].name,
            addData[4].name,
            addData[3].name,
            addData[2].name,
            addData[1].name,
            addData[0].name,
          ],
        //   data: addData.name,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          {
            name: "新增",
            type: "line",
            // data: [11, 11, 15, 13, 12, 13, 10],
            data: [
                //久试不行，用了笨的方法
                addData[6].value,
                addData[5].value,
                addData[4].value,
                addData[3].value,
                addData[2].value,
                addData[1].value,
                addData[0].value,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [
                  { type: "average", name: "平均值" },
                  [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      normal: {
                        position: "start",
                        formatter: "最大值",
                      },
                    },
                    type: "max",
                    name: "最高点",
                  },
                ]
                  ],
            },
          },
          {
            name: "删除",
            type: "line",
            // data: [1, -2, 2, 5, 3, 2, 0],
            data: [
              removeData[6].value,
              removeData[5].value,
              removeData[4].value,
              removeData[3].value,
              removeData[2].value,
              removeData[1].value,
              removeData[0].value,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [
                { type: "average", name: "平均值" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      normal: {
                        position: "start",
                        formatter: "最大值",
                      },
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
#myChart{
    margin-top: 10px;
}
</style>